<template>
    <div>
        <basic-table
                ref="vBasicTable"
                :api="getCompanyUserList"
                :immediate-fetch="false"
                :before-fetch="beforeFetch"
                :table-schema="tableSchema"
                :actions="tableActions"
                :table-prop="tableProp"
                :table-event="tableEvent"
                :row-info="{ rowKey: 'data' }"
        >
            <template #userNickName="{ row }">
                <div style="display: flex; align-items: center">
                    <div style="margin-right:10px;">
                        <img style="width:30px;height:30px;border-radius:50%;" :src="row.avatar || require('@/assets/images/profile.jpg')" />
                    </div>
                    <div>
                        <div>{{ row.userNickName }}</div>
                        <div>{{ row.mobile }}</div>
                    </div>
                </div>
            </template>

            <template #userAuthStatus="{ row }">
                <div display="flex" align-items="center">
                    <div>
                        <el-tag type="info" v-if="row.userAuthStatus == 0">{{ row.userAuthStatusStr }}</el-tag>
                        <el-tag type="success" v-if="row.userAuthStatus == 1">{{ row.userAuthStatusStr }}</el-tag>
                        <el-tag type="warning" v-if="row.userAuthStatus == 2">{{ row.userAuthStatusStr }}</el-tag>
                        <el-tag type="danger" v-if="row.userAuthStatus == 3">{{ row.userAuthStatusStr }}</el-tag>
                    </div>
                </div>
            </template>

            <template #crewStatus="{ row }">
                <div display="flex" align-items="center">
                    <div>
                        <el-tag type="info" v-if="row.crewAuthStatus == 0">{{ row.crewAuthStatusStr }}</el-tag>
                        <el-tag type="success" v-if="row.crewAuthStatus == 1">{{ row.crewAuthStatusStr }}</el-tag>
                        <el-tag type="warning" v-if="row.crewAuthStatus == 2">{{ row.crewAuthStatusStr }}</el-tag>
                        <el-tag type="danger" v-if="row.crewAuthStatus == 3">{{ row.crewAuthStatusStr }}</el-tag>
                        <el-button size="mini" type="text" @click="handleCrewStatus(row)" style="margin-left:10px;">
                            {{row.crewAuthStatus === 0 ? '发起认证' : '编辑认证'}}
                        </el-button>
                    </div>
                </div>
            </template>

            <template #userStatus="{ row }">
                <div style="text-align:center">
                    <el-tag type="info" v-if="row.userStatus == 0">{{ row.userStatusStr }}</el-tag>
                    <el-tag type="success" v-if="row.userStatus == 1">{{ row.userStatusStr }}</el-tag>
                </div>
            </template>

            <!-- 表格上方按钮-->
            <template #tableHead="{ total }">
                <div>在职成员{{ total }}人</div>
            </template>
        </basic-table>

        <role-change-dialog 
            :isVisible="isRoleChangeShow" 
            :userId="currentUserId" 
            :companyId="currentCompanyId"
            :currentType="currentType"
            @dialogCallBack="handleDialogCallBack"
            ></role-change-dialog>
        
        <transfer-leader-dialog
            :isVisible="isTransferLeaderShow" 
            :userId="currentUserId" 
            :companyId="currentCompanyId"
            @dialogCallBack="handleDialogCallBack"
            ></transfer-leader-dialog>
    </div>
</template>

<script>
    import roleChangeDialog from '@/views/enterprise/detail/components/RoleChangeDialog.vue';
    import transferLeaderDialog from '@/views/enterprise/detail/components/TransferLeaderDialog.vue';
    import { searchColumns, tableActions, tableSchema } from '@/views/enterprise/detail/components/modal.data';
    import { getCompanyUserList, leaveCompany } from '@/api/enterprise/index';
    export default {
        name: 'CompanyUserList',
        dicts: [],
        components: { roleChangeDialog, transferLeaderDialog },
        props: {
            companyId: String,
        },
        data() {
            return {
                // 转移超管弹窗显示
                isTransferLeaderShow: false,
                // 更换角色弹窗显示
                isRoleChangeShow: false,
                currentUserId: 0,
                currentCompanyId: '0',
                currentType: 0,
                total: 0,
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                columns: searchColumns(this),
                tableSchema: tableSchema,
                tableActions: tableActions(this.handleRoleChange, this.handleQuit, this.handleShowDetail, this.transferLeader),
                tableProp: {},
                tableEvent: {},
                // 查询参数
                queryParams: {},
            };
        },
        mounted() {
            // 下拉框列表数据获取方法调用
            this.currentCompanyId = this.companyId;
            this.$refs.vBasicTable.fetch();
        },
        watch: {
            companyId(newValue) {
                console.log('companyId变化了:', newValue);
            }
        },
        methods: {
            getCompanyUserList,
            handleDialogCallBack() {
                console.log('callback');
                this.isRoleChangeShow = false;
                this.isTransferLeaderShow = false;
                this.$refs.vBasicTable.fetch();
            },
            serach(form) {
                this.$refs.vBasicTable.fetch();
            },
            beforeFetch(params) {
                let query = {
                    companyId: this.currentCompanyId
                };
                return query;
            },
            // 展示详情
            handleShowDetail(row) {
                this.$router.push({ name: 'UserDetail', query: { id: row.userId } });
            },
            // 转移超管
            transferLeader(row) {
                console.log('row:', row);
                this.isTransferLeaderShow = true;
                this.currentUserId = row.userId;
            },
            // 变更角色
            handleRoleChange(row) {
                console.log('row:', row);
                this.isRoleChangeShow = true;
                this.currentType = row.signType;
                this.currentUserId = row.userId;
            },
            // 移出企业
            handleQuit(row) {
                this.$modal.confirm(`确认要将${row.name}移出企业吗？`).then(() => {
                    return leaveCompany({
                        userId: row.userId,
                        companyId: row.companyId
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$modal.msgSuccess(text + '成功');
                            this.$refs.vBasicTable.fetch();
                        }
                    });
                }).catch(() => {});
            },
            // 船员认证
            handleCrewStatus(row) {
                if(row.crewAuthStatus === 0) {
                    this.$router.push({ name: 'CrewSave' });
                } else {
                    this.$router.push({ name: 'CrewSave', query: { id: row.crewId } });
                }
            }
        },
    };
</script>
<style lang="scss" scoped>
    .danger {
        color: #f56c6c;
    }

    .warning {
        color: #e6a23c;
    }
</style>
